<template>
  <a-card class="general-card">
    <a-form v-model="checkForm" class="formHeader">
      <a-row justify="start" :gutter="24">
        <a-col class="formHeader-criteria">
          <a-row :gutter="16">
            <a-col span="8">
              <a-form-item label="单别" label-col-flex="100px">
                <a-input v-model="checkForm.TA001" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="单号" label-col-flex="100px">
                <a-input v-model="checkForm.TA002" allow-clear/>
              </a-form-item>
            </a-col>
            <a-col span="8">
              <a-form-item label="品号" label-col-flex="100px">
                <a-input v-model="checkForm.TA006" allow-clear/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-col>
        <a-col class="formHeader-btn">
          <a-space direction="vertical" :size="20">
            <a-button type="primary" @click="search">
              <template #icon>
                <icon-search />
              </template>
              <template #default>查询</template>
            </a-button>
            <a-button @click="reset">
              <template #icon>
                <icon-loop />
              </template>
              <template #default>重置</template>
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </a-form>

    <!-- 用户显示区域 -->
    <div class="user-area">
      <vxe-table
          :data="data"
          size="mini"
          height="100%"
          :loading="loadingFlag"
          :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
          :column-config="{ isCurrent: true, resizable: true }"
          :checkbox-config="{ checkRowKeys: defaultSelecteRowKeys, highlight: true }"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          stripe
          border
          show-overflow
        >
          <vxe-column field="ta001" title="单别"  show-overflow align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.ta001 }}</template>
          </vxe-column>
          <vxe-column field="ta002" title="单号"  show-overflow align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.ta002 }}</template>
          </vxe-column>
          <vxe-column field="ta064" title="部门编号"  show-overflow align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.ta064 }}</template>
          </vxe-column>
          <vxe-column field="dname" title="部门名称"  show-overflow align="center" min-width="120" sortable>
            <template #default="{ row }"> {{ row.dname }}</template>
          </vxe-column>
          <vxe-column field="num" title="报工数量"  show-overflow align="center" width="100" sortable>
            <template #default="{ row }"> {{ row.num }}</template>
          </vxe-column>
          <vxe-column field="ta003" title="加工顺序"  align="center" width="100" sortable>
            <template #default="{ row }"> {{ row.ta003 }}</template>
          </vxe-column>
          <vxe-column field="ta004" title="工艺"  show-overflow align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.ta004 }}</template>
          </vxe-column>
          <vxe-column field="ta006" title="产品品号"  show-overflow align="center" width="120" sortable>
            <template #default="{ row }"> {{ row.ta006 }}</template>
          </vxe-column>
          <vxe-column field="ta007" title="单位"  show-overflow align="center" width="100" sortable>
            <template #default="{ row }"> {{ row.ta007 }}</template>
          </vxe-column>
          <vxe-column field="ta011" title="状态值"  align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.ta011 }}</template>
          </vxe-column>
          <vxe-column field="ta015" title="预计产量"  show-overflow align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.ta015 }}</template>
          </vxe-column>
          <vxe-column field="ta034" title="产品品名"  show-overflow align="center" width="170" sortable>
            <template #default="{ row }"> {{ row.ta034 }}</template>
          </vxe-column>
          <vxe-column field="ta035" title="产品规格"  align="center" min-width="150" sortable>
            <template #default="{ row }"> {{ row.ta035 }}</template>
          </vxe-column>
          <vxe-column field="kgtime" title="开工时间"  show-overflow align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.kgtime }}</template>
          </vxe-column>
          <vxe-column field="percent" title="进度(%)"  show-overflow align="center" fixed="right" min-width="100" sortable>
            <template #default="{ row }"> {{ row.percent }}% </template>
          </vxe-column>
          <vxe-column field="purchasePrice" title="操作" show-overflow align="center" fixed="right" width="170">
            <template #default="{ row, rowIndex }">
              <a-space>
                <a-button type="primary" size="mini" @click="toDetail(row)">查看</a-button>
                <a-button type="primary" size="mini" status="success" @click="outExcleFun(row)">导出Excel</a-button>
              </a-space>
            </template>
          </vxe-column>
        </vxe-table>
    </div>
    <vxe-pager
        v-model:current-page="pagination.pageNum"
        v-model:page-size="pagination.pageSize"
        :total="pagination.total"
        :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
        @page-change="getTable">
    </vxe-pager>
  </a-card>
</template>

<script lang="ts">
import { toRefs } from 'vue';
import importConfig from './queyrOddModel.ts';
import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';

export default {
  components: {
    formButtonGroup,
  },
  setup() {
    const {
      base,
      getTable,
      reset,
      outExcleFun,
      toDetail,
      search,
    } = importConfig();

    return {
      ...toRefs(base),
      getTable,
      reset,
      outExcleFun,
      toDetail,
      search,
    };
  },
};
</script>

<style lang="less" scoped>
.formHeader {
  &-buttom {
    padding: 10px 0px;
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: flex-end;
  }
  &-criteria {
    flex: 1 1 0;
    &-postizz {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;
    }
  }

  &-btn {
    border-left: 1px solid #ddd;
    flex: 0 0 86px;
    text-align: right;

  }
}

:deep(.arco-divider-horizontal) {
  margin: 10px 0;
}

.add-user-btn {
  display: flex;
}

.user-area {
  margin-top: 20px;
  height: calc(100vh - 355px);

  :deep(.arco-table-td-content) {
    text-align: center;
  }
}
</style>
